<!--
<header class="navbar navbar-static-top navbar-inverse">
    <nav class="collapse navbar-collapse">
	<ul class="nav navbar-nav">
		<li><a href="javascript:window.location.replace('/app/kaae#/');">Watchers</a></li>
		<li><a href="javascript:window.location.replace('/app/kaae#/alarms');">Alarms</a></li>
		<li><a href="javascript:window.location.replace('/app/kaae#/about');">About</a></li>
	</ul>
    </nav>
</header>
-->

<div class="container" ng-controller="kaaeWatchers">
  <div class="row">
    <div class="col-12-sm">
      <p style="float:left;">UTC time is {{ utcTime }}</p>
      <p style="float:right;">Local time is {{ currentTime }}</p>
      <br style="clear:both;">

      <div class="panel panel-default">
	<div class="panel-heading"><h4>WATCHERS
		<div class="edit-group pull-right">
			<a href="javascript:;" ng-show="watcherSaved" ng-click="watcherNew(watcherSaved);watcherNew=undefined;" title="Paste Kibana query to new Watcher"><i class="fa fa-paste"></i></a>
			<a href="javascript:;" ng-click="watcherNew()" title="Create new Watcher"><i class="fa fa-plus"></i></a>
      <a href="javascript:;" ng-click="reporterNew()" title="Create new Reporter"><i class="fa fa-camera"></i></a>
		</div></h4>
	</div>
	<table class="table">
	  <thead>
	    <tr>
		<th>ID</th>
		<th>INTERVAL</th>
		<th>INPUT</th>
		<th>SCRIPT</th>
		<th>ACTIONS</th>
		<th></th>
	    </tr>
	  <tbody ng-repeat='watcher in getWatchers()'>
	    <tr ng-class="{newRow: watcher._new == 'true' || watcher._id == 'new_saved'}">
	         <td>{{watcher._id}}</td>
	         <td ng-show="watcher._source.trigger.schedule.interval" ng-hide="watcher._source.trigger.schedule.later">{{ watcher._source.trigger.schedule.interval }}</td>
	         <td ng-show="watcher._source.trigger.schedule.later">{{ watcher._source.trigger.schedule.later }}</td>
	         <td>{{watcher._source.input.search.request.indices.join(',')}}</td>
	         <td>{{watcher._source.condition.script.script}}</td>
		 <td><span ng-repeat="(key,value) in watcher._source.actions"><p>{{ key }}</p></span> </td>
		 <td class="text-right edit-group">
			<a title="Show Watcher" href="javascript:;" class="show-rule" ng-click="setAce($index,true);collapse=!collapse" ng-model="collapse"><i class="fa fa-ellipsis-h"></i></a>
			<a href="javascript:;" ng-show="(collapse) && editor_status.readonly" ng-click="setAce($index,false)" ng-model=collapse class="edit-rule"><i class="fa fa-edit"></i></a>
			<a href="javascript:;" ng-show="(collapse) && !editor_status.readonly" ng-click="setAce($index,true)" ng-model=collapse class="edit-rule"><i class="fa fa-eye"></i></a>
			<a href="javascript:;" ng-show="editor_status.undo && !editor_status.readonly" ng-click="watcherSave($index)" class="delete-rule"><i class="fa fa-save"></i></a>
			<a href="javascript:;" ng-hide="watcher._new == 'true'" class="delete-rule" ng-click="watcherDelete($index)"><i class="fa fa-trash"></i></a>
		 </td>
	    </tr>
	    <!-- watcher._id=='new'" -->
	    <tr ng-show="collapse">
	        <td colspan="100%">
		   <div id="editor-{{$index}}" class="aceditor">{{ watcher | json }}</div>
		</td>
	    </tr>

	  </tbody>
	</table>
      </div>

    </div>
  </div>
</div>
